<template>
	<view class="task-layout">
		<my-header background-color="transparent" fit-weixin>
			<!-- <template v-slot:menu>
				<image class="task-rule" @click="play" style="width: 45rpx;height: 45rpx;"
					src="/static/images/user/ic-rule.png"></image>
			</template> -->
		</my-header>
		<my-content class="content">
			<!-- <view class="dot"></view> -->
			<view class="box">
				<my-welfare-tab :tab-list="typeData" v-model="type"></my-welfare-tab>
				
				<view class="neirong_box" v-for="(item, index) in taskData" :key="index"
                style="background-image: url('https://www.dingxians.cn/upload/20250425/680b5e38ebc8a.png');">
                <view class="left_box"
                    >
                    <image src="https://www.dingxians.cn/zuanshi.png" mode="scaleToFill" />
                </view>
                <view class="center_box">
                    <view class="name_box slh">{{ item.title }}</view>
                    <view class="cnetet_ccc ">完成任务 即可领取</view>
                    <view class="jl_ccc "
                        :style="{ color: item.status == 0 ? '' : '#fff', opacity: item.status == 0 ? '0.5' : '1' }">
                        <text style="font-size: 20rpx;">奖励:</text> <text
                            :style="{ color: item.status == 0 ? '' : '#DED000', opacity: item.status == 0 ? '0.5' : '1' }">{{
                                item.reward_title }}</text>
                    </view>
                </view>
                <view class="dangqian_box">当前流水：{{ item.nums }}</view>
                <view class="anniu_box"
                    style="background-image: url('https://www.dingxians.cn/upload/20250422/680740a385567.png');opacity: .5;"
                    v-if="item.status == 0">
                    去完成
                </view>
                <view class="anniu_box"
                    style="background-image: url('https://www.dingxians.cn/upload/20250422/680740a385567.png');"
                    v-else-if="item.status == 2">
                    已领取
                </view>
                <view class="anniu_box"
                    style="background-image: url('https://www.dingxians.cn/upload/20250422/680740a385567.png');" v-else
                    @click="draw(item)">
                    领取
                </view>

            </view>
			</view>

		</my-content>
	</view>

</template>

<script>
import api from '../../api/index.js'
export default {
	data() {
		return {
			type: 0,
			typeData:
				[
					"日任务", "周任务"
				],
			taskData: []
		}
	},
	onLoad() {

	},
	onShow() {
		this.getData();
	},

	watch: {
		type() {
			this.getData()
		}
	},

	methods: {
		back() {
			uni.navigateBack()
		},
		play() {
			this.header('/packageB/content/task')
		},
		changeType(item) {
			/*if (this.type != item.id) {
				this.type = item.id
				this.getData()
			}*/
		},
		getData() {
			uni.showLoading({
				title: '数据加载中'
			})
			api.users.tasks({ type: this.type + 1 }).then(res => {
				uni.hideLoading()
				if (res.code === 200) {
					this.taskData = res.data;
				}
			}).catch(error => {
				console.log(error)
			})
		},
		submit(item, index) {
			item.status = 2;
			this.$set(this.taskData, index, item)
			api.tasks.reward(item.id).then(res => {
				if (res.code === 200) {
					this.show(res.msg)
					setTimeout(() => {
						this.getData()
					}, 1000)
				}
			}).catch(error => {
				console.log(error)
			})
		},
		//领取奖励
        draw(item) {
			api.users.taskss(item.id).then(res => {
                if (res.code == 200) {
                    this.show(res.msg)
                    this.getData()
                }
            })
        }
	},
}
</script>

<style lang="scss">
.task-layout {
	min-height: 100vh;
	background-color: black;
}

.content {
	position: relative;
	min-height: 100vh;
	height: 100%;
	background-image: url("https://www.dingxians.cn/upload/user_static/index/bg-task.png");
	background-size: 100% 100%;

	.neirong_box {
    width: 686rpx;
    height: 268rpx;
    margin: auto;
    margin-bottom: 21rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 30rpx;
    padding-top: 16rpx;
    position: relative;

    .left_box {
        width: 134rpx;
        height: 145rpx;
        background-size: 100% 100%;
        position: relative;
        margin-right: 21rpx;

        image {
            width: 60rpx;
            height: 60rpx;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

    }

    .center_box {
        // width: 280rpx;
        height: 145rpx;
        margin-right: 21rpx;

        .name_box {
            width: 280rpx;
            height: 29rpx;
            line-height: 29rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 20rpx;
            color: #CCCCCC;
            margin-bottom: 12rpx;
        }

        .cnetet_ccc {
            width: 280rpx;
            height: 19rpx;
            line-height: 19rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 20rpx;
            color: #CCCCCC;
            margin-bottom: 28rpx;
        }

        .jl_ccc {
            // width: 280rpx;
            height: 39rpx;
            // line-height: 29rpx;
            font-family: Source Han Serif CN;
            font-weight: bold;
            font-size: 30rpx;
            color: #FFFFFF;
            opacity: 0.5;
        }
    }

    .dangqian_box {
        height: 19rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20rpx;
        color: #DED000;
        position: absolute;
        right: 28rpx;
        top: 75rpx;
    }

    .anniu_box {
        width: 123rpx;
        height: 64rpx;
        position: absolute;
        right: 28rpx;
        bottom: 62rpx;
        background-size: 100% 100%;
        text-align: center;
        line-height: 58rpx;
        font-family: Source Han Serif CN;
        font-weight: bold;
        font-size: 30rpx;
        color: #FFFFFF;

    }
}
	.tabbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: fixed;
		left: 0;
		top: 80rpx;
		z-index: 5;

		.back {
			width: 65rpx;
			height: 65rpx;
			margin-left: 20rpx;
		}
	}

	.cover {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100vw;
		z-index: -1000;
		background-color: #270f7c;
	}

	.tabbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: fixed;
		left: 0;
		top: 80rpx;
		z-index: 5;

		.back {
			width: 65rpx;
			height: 65rpx;
			margin-left: 20rpx;
		}

		.play {
			width: 65rpx;
			height: 65rpx;
			margin-right: 20rpx;
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100vw;
		z-index: -100;
	}

	.dot {
		height: 850rpx;
		background-image: url("https://www.dingxians.cn/upload/user_static/index/bg-task-header.png");
		background-size: 100% 100%;
	}

	.box {
		display: flex;
		flex-direction: column;

		.box_header {
			display: flex;
			width: 600rpx;
			margin: 0 auto 20rpx auto;
			justify-content: space-between;
			align-items: center;

			.box_header_item {

				.box_header_item_image {
					width: 290rpx;
				}
			}
		}

		.box_content {
			display: flex;
			flex-direction: column;

			.box_content_item {
				display: flex;
				flex-direction: column;
				width: 700rpx;
				/*height: 383rpx;*/
				margin: 40rpx auto 30rpx auto;
				position: relative;
				background-image: url("https://www.dingxians.cn/upload/user_static/index/bg-task-item.png");
				background-size: 100% 100%;

				.box_content_item_bg {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					z-index: -1;
				}

				.box_content_header {
					color: #fff;
					font-size: 32rpx;
					/*margin-left:40rpx;*/
					text-align: center;
					/*height: 60rpx;*/
					/*line-height: 60rpx;*/
					font-weight: bold;

					.amount {
						color: #DED000;
					}
				}

				.box_rewards {
					display: flex;
					flex-direction: column;

					.box_reward_box {
						display: flex;
						margin: 40rpx 20rpx;

						.box_rewards_item {
							width: 180rpx;
							margin: 0 25rpx;
							display: flex;
							flex-direction: column;
							align-items: center;

							.box_rewards_item_top {
								display: flex;
								justify-content: center;
								align-items: center;
								/*background: linear-gradient(to bottom,  #AE56FF 51%,  #D78EFF 100% );*/
								background-image: url("https://www.dingxians.cn/upload/user_static/index/bg-task-1.png");
								background-size: 100% 100%;
								width: 100%;
								height: 180rpx;
								z-index: 2;

								.box_rewards_image {
									width: 80rpx;
								}
							}

							.box_rewards_item_bottom {
								color: white;
								font-size: 24rpx;
								/*margin-top: 20rpx;*/
							}
						}
					}

					.action {
						position: relative;
						top: 30rpx;
						width: 480rpx;
						color: white;
						font-size: 32rpx;
						/*margin: 0 auto 50rpx auto;*/
						margin: 0 auto;
						text-align: center;
						height: 100rpx;
						line-height: 100rpx;
						/*border-radius: 50rpx;*/
						background-size: 100% 100%;
						background-image: url("https://www.dingxians.cn/upload/user_static/index/bg-task-action.png");
						/*background: linear-gradient(to bottom, #FBFFA8, #8BFAFF );*/
						font-weight: bold;

						/*box-shadow: #71C2CB 0 5rpx;*/
						&.none {
							background-image: url("https://www.dingxians.cn/upload/user_static/index/bg-task-action-disable.png");
							/*background: linear-gradient(to bottom, #F7F7F7, #E5E5E5 );*/
							color: black;
							/*box-shadow: #300B74 0 5rpx;*/
						}

						.amount {
							color: #FF5B5B;
						}
					}
				}
			}

		}
	}
}
</style>